<? @include($_SERVER['DOCUMENT_ROOT']."/config/log_visitors.inc"); ?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
	<title>Folder tree with Drag and Drop capabilities</title>
	<?
	@include($_SERVER['DOCUMENT_ROOT']."/config/metatags.inc");
	?>	
	<link rel="stylesheet" href="css/demos.css" media="screen" type="text/css">
	<script type="text/javascript" src="../js/ajax.js"></script>
	<script type="text/javascript" src="../js/dhtml-suite-for-applications-without-comments.js">
	</script>
</head>
<body>
	<div id="header">
		<img src="../images/logo.png">
	</div>
	<ul id="DHTMLSuite_tree2" class="DHTMLSuite_tree">
		<li id="node10000" noDrag="true" noSiblings="true"><a href="#">Root node</a>
			<ul>
				<li id="node1"><a href="#">Europe</a>
					<ul>
						<li id="node2"><a href="#">Norway</a>
							<ul>
								<li id="node3"><a href="#">Stavanger</a></li>
								<li id="node6"><a href="#">Bergen</a></li>
								<li id="node7"><a href="#">Oslo</a></li>
							</ul>
						</li>
						<li id="node8"><a href="#">United Kingdom</a>
							<ul>
								<li id="node9"><a href="#">London</a></li>
								<li id="node10"><a href="#">Manchester</a></li>
							</ul>				
						</li>
						<li id="node12"><a href="#">Sweden</a></li>
						<li id="node13"><a href="#">Denmark</a></li>
						<li id="node14"><a href="#">Germany</a>
							<ul>
								<li id="node141"><a href="#">Berlin</a>	
								<li id="node142"><a href="#">Munich</a>	
								<li id="node143"><a href="#">Stuttgart</a>	
							</ul>
						</li>
					</ul>
				</li>
				<li id="node15"><a href="#">Asia</a>
					<ul>
						<li id="node151"><a href="#">Japan</a>	
						<li id="node152"><a href="#">China</a>	
						<li id="node153"><a href="#">Indonesia</a>			
					</ul>
				</li>
				<li id="node16"><a href="#">Africa</a>
					<ul>
						<li id="node17"><a href="#">Tanzania</a></li>
						<li id="node18"><a href="#">Kenya</a></li>
					</ul>
				</li>
				<li id="node19"><a href="#">America</a>
					<ul>
						<li id="node20"><a href="#">Canada</a></li>
						<li id="node21"><a href="#">United States</a></li>
						<li id="node22"><a href="#">Mexico</a></li>
						<li id="node23"><a href="#">Argentina</a></li>
					</ul>		
				</li>	
				<li id="node24" noChildren="true"><a href="#">Cannot have children</a></li>
				<li id="node25" noDrag="true"><a href="#">Cannot be dragged</a></li>
			</ul>
		</li>
	</ul>
	<form>
	<input type="button" onclick="alert(treeObj.getSaveString())" value="Save">
	</Form>
	<script type="text/javascript">	
	treeObj = new DHTMLSuite.JSDragDropTree();
	treeObj.setTreeId('DHTMLSuite_tree2');
	treeObj.setMaximumDepth(7);
	treeObj.setMessageMaximumDepthReached('Maximum depth reached'); // If you want to show a message when maximum depth is reached, i.e. on drop.
	treeObj.init();
	treeObj.expandAll();
	</script>
	<p style="margin:10px">Use your mouse to drag and drop the nodes. Use the "Save" button to save your changes. The new structure will be sent to the server by use of Ajax(Asynchron XML and Javascript). </p>
	<p style="margin:10px"><b><i>Note!</i></b> I'm not saving the structure in this demo in order to make the script look the same for all visitors</p>
<?
@include($_SERVER['DOCUMENT_ROOT']."/config/kontera.php");
?>	
</body>
</html>